<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <style>
        * {
            box-sizing: border-box;
        }

        ul {
            list-style-type: none;
        }

        body {
            font-family: Verdana, sans-serif;
            background: #E8F0F3;
        }
        #calendar{
            width:100%;
            margin: 0 auto;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
        }
        .month {
            width: 100%;
            background: #00B8EC;
        }

        .month ul {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        .year-month {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .year-month:hover {
            background: rgba(150, 2, 12, 0.1);
        }

        .choose-year {
            padding-left: 20px;
            padding-right: 20px;
        }

        .choose-month {
            text-align: center;
            font-size: 1.5rem;
        }

        .arrow {
            padding: 30px;
        }

        .arrow:hover {
            background: rgba(100, 2, 12, 0.1);
        }

        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #00B8EC;
            display: flex;
            flex-wrap: wrap;
            color: #FFFFFF;
            justify-content: space-around;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            text-align: center;
        }

        .days {
            padding: 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 14.2%;
            text-align: center;
            padding-bottom: 15px;
            padding-top: 15px;
            font-size: 1rem;
            color: #000;
        }

        .days li .active {
            padding: 6px 10px;
            border-radius: 50%;
            background: #00B8EC;
            color: #fff;
        }

        .days li .other-month {
            padding: 5px;
            color: gainsboro;
        }

        .days li:hover {
            background: #e1e1e1;
        }

        #left{
            float: left;
            width: 20%;
        }
        #right
        {
            float: left;
            width: 80%;
        }
    </style>
</head>
<body>
<div id="calendar">


    <div id="left">
        <span> 要修改的日期  </span>

        <li v-for="d in checkedDays">{{ d }} </li>

        <div v-if="checkedDays.length!=0">

            <label for="checkedCount">要修改的天数</label>

            <input id="checkedCount" v-model="checkedCount" >
            <button  >确定修改</button>
        </div>
    </div>

    <div id="right">

        <!-- 年份 月份 -->
        <div class="month">
            <ul>
                <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
                <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                    <span class="choose-year">{{ currentYear }}</span>
                    <span class="choose-month">{{ currentMonth }}月</span>
                </li>
                <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
            </ul>
        </div>
        <!-- 星期 -->
        <ul class="weekdays">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li style="color:red">六</li>
            <li style="color:red">日</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">

            <li  v-for="dayobject in days" style="height: 80px;" >
                <!--本月-->
                <!--如果不是本月  改变类名加灰色-->

                <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>

                <!--如果是本月  还需要判断是不是这一天-->
                <span v-else>
              <!--今天-->
                    <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">{{ dayobject.day.getDate() }}</span>
                    <span v-else>{{ dayobject.day.getDate() }}

                    </span>
                </span>

               <p v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate()>=new Date().getDate()">

                   <input type="checkbox" :id="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" :value="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" v-model="checkedDays" >

               </p>


                <div v-if="leftobj[dayobject.index]">


                    <!--
                    <button @click="leftobj[dayobject.value]=true" v-if="leftobj[dayobject.index].value===false">


                        修改</button>
                    <button @click="leftobj[dayobject.value]=false" v-else-if="leftobj[dayobject.index].value===true">


                        确定</button>

                        -->
                </div>

            </li>
        </ul>
    </div> <!--right-->
</div>



<script>
    var myVue=new Vue({
        el: '#calendar',
        data: {
            currentDay: 1,
            currentMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj:[    //存放剩余数量
                {count:1,value:false},
                {count:2,value:false},
                {count:3,value:false},
                {count:4,value:false},
                {count:5,value:false},
            ],
            checkedDays:[],
            checkedCount:20,

        },
        created: function() {
            this.initData(null);
        },

        methods: {

            getleft:function () {
                return this.left++
            },
            cutleft:function (day) {
                // this.leftArray[day.index]-=1;
                if(this.leftobj[day.index].count>=1)
                    this.leftobj[day.index].count--;
                else
                    alert('已经没有位置了')
            },
            initleftcount:function()
            {
                //每次初始化需要更新数量
                for(var i=0;i<4;i++)
                {
                    this.leftobj[i].count=i+3;
                }
            },
            initData: function(cur) {
                var leftcount=0;
                var date;
                var index=0;
                //this.initleftcount();
                //有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
                // 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
                //还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）


                if (cur) {
                    date = new Date(cur);
                } else {
                    var now=new Date();
                    var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                }
                this.currentDay = date.getDate();
                console.log(this.currentDay);
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;

                this.currentWeek = date.getDay(); // 1...6,0
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                console.log("today:" + str + "," + this.currentWeek);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    console.log("y:" + d.getDate());

                    var dayobject={};
                    dayobject.day=d;
                    var now=new Date();
                    if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
                    {
                        dayobject.index=index++;
                    }
                    else  if(index!=0&&index<3)
                        dayobject.index=index++;

                    this.days.push(dayobject);


                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject={};
                    dayobject.day=d;
                    var now=new Date();
                    if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
                    {
                        dayobject.index=index++;
                    }

                    else if(index!=0&&index<3)
                        dayobject.index=index++;
                    this.days.push(dayobject);
                }

            },
            pickPre: function(year, month) {

                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickNext: function(year, month) {
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(35);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickYear: function(year, month) {
                alert(year + "," + month);
            },

            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function(year,month,day){
                var y = year;
                var m = month;
                if(m<10) m = "0" + m;
                var d = day;
                if(d<10) d = "0" + d;
                return y+"-"+m+"-"+d
            },


        },
    });

</script>
</body>
</html>